import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Form, Modal, Button, Input } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import ManageList from '@/components/ManageList';
import SelectForm from '@/components/SelectForm';
import TableButtons from '@/components/TableButtons';
import RightDraw from '@/components/RightDraw';
import StandardTable from '@/components/StandardTable';
import AntdFormItem from '@/components/AntdFormItem';
import AntdInput from '@/components/AntdInput';
import AdSelect from '@/components/AdSelect';
import AdButton from '@/components/AdButton';
import { queryDict, vitifyCheck, formatPrice } from '@/utils/common';
import { allDictList } from '@/utils/constans';
import AntdDatePicker from '@/components/AntdDatePicker';
import OcrPaperDetailInfo from './OcrPaperDetailInfo';
import OcrAdd from './OcrAdd';
import {
    selectOcrList,
    allDispatchType,
    codes,
    routeUrl,
    renderTableAdSearch,
    renderTableAdSelect,
    formateNOSecond,
    saveAllValues,
    ocrTypeList,
    statusList,
    auditList
} from './utils';
import styles from './index.less';

const { confirm } = Modal;
const dateFormat = 'YYYY-MM-DD'

@ManageList
@connect(({ paperVerify, component, loading }) => ({
    ocrList: paperVerify.ocrList,
    formValues: paperVerify.formValues,
    searchValue: component.searchValue,
    dictObject: component.dictObject,
    loading: loading.effects[allDispatchType.list],
}))
@Form.create()

export default class PaperVerifyList extends Component {
    state = {
        visible: false,
        visibleAdd: false,
        detailId: '',
        selectedRows: [],
        recordStatus: '',
        expandForm: false,
        ocrType: '',
    };
    className = 'PaperVerifyList';

    columns = [
        {
            title: '单号',
            dataIndex: 'ocrNo',
            render: (text, record) => (
                <AdButton
                    mode="a"
                    onClick={e => this.showDetail(e, record)}
                    text={text}
                    code={codes.showDetail}
                />
            ),
            fixed: this.props.isMobile ? false : true,
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (text, record) =>
                renderTableAdSelect({
                    props: this.props,
                    value: text,
                    data: statusList,
                }),
            width: 100,
        },
        {
            title: '类型',
            dataIndex: 'type',
            width: 100,
            render: text =>
                renderTableAdSelect({ props: this.props, value: text, data: ocrTypeList }),
        },
        {
            title: '名称',
            dataIndex: 'name',
            render: text => <span title={text}>{text}</span>,
        },
        {
            title: '审核',
            dataIndex: 'audit',
            render: text =>
                renderTableAdSelect({ props: this.props, value: text, data: auditList }),

        },
        {
            title: '创建人',
            dataIndex: 'createBy',
            render: text => renderTableAdSearch({ props: this.props, value: text }),
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            render: text => moment(text).format(formateNOSecond),
        },
        {
            title: '更新人',
            dataIndex: 'updateBy',
            render: text => renderTableAdSearch({ props: this.props, value: text }),
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            render: text => moment(text).format(formateNOSecond),
        },
    ];

    componentWillMount() {
        // const allDict = [allDictList.papersType];
        // queryDict({ props: this.props, allDict });
    }

    componentDidMount() {
        selectOcrList({ props: this.props });
    }

    /**
     * form 查找条件 重置
     */
    handleFormReset = () => {
        const { form } = this.props;
        const props = { props: this.props };
        saveAllValues({ payload: { formValues: {} }, ...props });
        selectOcrList({ ...props });
    };

    /**
     * form 查找条件 查询
     */
    handleSearch = formValues => {
        if (!formValues) return;
        const { createTime, ...params } = formValues;
        if (createTime&&createTime.length>0) {
            param.createTimeStart = moment(createTime[0]).format(dateFormat);
            param.createTimeEnd = moment(createTime[1]).format(dateFormat);
        }else{
            param.createTimeStart=''
            param.createTimeEnd=''
        }
        saveAllValues({ props: this.props, payload: { formValues } });
        selectOcrList({ props: this.props, payload: params });
    };

    /**
     * table 表格 分页操作
     */
    handleStandardTableChange = param => {
        const { formValues } = this.props;
        selectOcrList({ payload: { ...formValues, ...param }, props: this.props });
    };

    /**
     *  查看详情
     */
    showDetail = (e, record) => {
        e.stopPropagation();
        router.push(`${routeUrl.detail}/${record.id}`);
    };

    //新建
    handleAdd = (ocrType) => {
        this.setInfoModal();
        this.handleStateChange([{ ocrType }]);
    };
    setInfoModal = () => {
        this.setState((pre) => ({
            visibleAdd: !pre.visibleAdd
        }))
    };

    //编辑
    handleEdit = () => {
        const { detailId } = this.state;
        this.handleStateChange([{ visible: false }]);
        router.push(`${routeUrl.edit}/${detailId}`);
    };

    handleStateChange = (options = []) => {
        options.map(item => {
            this.setState(item);
        });
    };

    // 删除
    delPaper = () => {
        const { dispatch, formValues } = this.props;
        const { detailId } = this.state;
        confirm({
            title: '确定删除这条数据吗？',
            content: ' ',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk: () => {
                dispatch({
                    type: allDispatchType.delete,
                    payload: { id: detailId },
                    callback: () => {
                        this.handleStateChange([{ visible: false }]);
                        selectOcrList({ props: this.props, payload: formValues });
                    },
                });
            },
        });
    };
    changeInput = (e) => {
    }

    render() {
        const {
            form,
            form: { getFieldDecorator },
            loading,
            ocrList,
        } = this.props;

        const { ocrType, visibleAdd, isMobile, visible, detailId, selectedRows, recordStatus, expandForm } = this.state;

        const commonParams = {
            getFieldDecorator,
        };
        const firstFormItem = (
            <AntdFormItem label="公司/车牌" code="name" {...commonParams}>
                <AntdInput />
            </AntdFormItem>
        );
        const secondFormItem = (
            <AntdFormItem label="状态" code="status" {...commonParams}>
                <AdSelect isExist={true} data={statusList} mode="multiple" />
            </AntdFormItem>
        );

        // secondForm 参数
        const otherFormItem = [
            [
                <AntdFormItem label="单号" code="ocrNo" {...commonParams}>
                    <AntdInput />
                </AntdFormItem>,
            ],
            [
                <AntdFormItem label="审核" code="audit" {...commonParams}>
                    <AdSelect isExist={true} data={auditList} />
                </AntdFormItem>,
                <AntdFormItem label="创建时间" code="createTime" {...commonParams}>
                    <AntdDatePicker mode="range" />
                </AntdFormItem>,
                <AntdFormItem label="类型" code="type" {...commonParams}>
                    <AdSelect isExist={true} data={ocrTypeList} />
                </AntdFormItem>,
            ],
            ['operatorButtons'],
        ];

        const selectFormParams = {
            firstFormItem,
            secondFormItem,
            otherFormItem,
            form,
            className: this.className,
            handleFormReset: this.handleFormReset,
            handleSearch: this.handleSearch,
            toggleForm: expandForm => {
                this.handleStateChange([{ expandForm }]);
            },
            code: codes.select,
        };

        return (
            <Fragment>
                <SelectForm {...selectFormParams} />
                <div className={styles.tableListOperator}>
                    <AdButton type="primary" onClick={() => this.handleAdd('COMPANY')} text="+ 公司" code={codes.add} />
                    <AdButton type="primary" onClick={() => this.handleAdd('VEHICLE')} text="+ 车辆&司机" code={codes.add} />
                </div>
                {
                    visibleAdd && <OcrAdd addMode="ocr" ocrType={ocrType} setInfoModal={this.setInfoModal} visible={visibleAdd} />
                }
                <div id="voiceText">
                    <StandardTable
                        loading={loading}
                        data={ocrList}
                        columns={this.columns}
                        onPaginationChange={this.handleStandardTableChange}
                        className={this.className}
                        code={codes.page}
                        expandForm={expandForm}
                        disabledRowSelected={true}
                    />
                </div>
            </Fragment>
        );
    }
}
